<template>
  <a-modal
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    :title="title"
    :visible="visible"
    :width="1200"
    switchFullscreen
    @cancel="handleCancel"
  >
    <template slot="footer">
      <div>
        <a-button @click="saveDraft" style="margin-right: 10px;">暂存</a-button>
        <a-button :loading="confirmLoading" type="primary" @click="handleOk">提交</a-button>
      </div>
    </template>
    <a-spin :spinning="confirmLoading">
      <!-- 主表单区域 -->
      <a-form :form="form" :labelCol="{span:7}" :wrapperCol="{span:15}">
        <a-row>
          <h2>合同信息</h2>
        </a-row>
        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item label="订单号">
              <a-input
                v-decorator="['orderNumber', { rules: [{ required: true, message: '请输入销售合同对应的订单号' }] }]"
                placeholder="请输入销售合同对应的订单号"
              />
<!--              <a-input-->
<!--                v-decorator="['orderNumber', { rules: [{ required: true, message: '请输入销售合同对应的订单号' }] }]"-->
<!--                placeholder="请输入销售合同对应的订单号"-->
<!--                @blur="blurOrderNumber($event)"-->
<!--              />-->
            </a-form-item>
          </a-col>
          <a-col :sm="12" :xs="24">
            <a-form-item label="合同签订时间">
              <a-date-picker
                v-decorator="['contractSignTime', {initialValue: currentTime, rules: [{ required: true, message: '请输入合同签订时间' }] }]"
                format="yyyy-MM-DD HH:mm:ss"
                placeholder="请输入合同签订时间"
                showTime
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item label="合同编号">
              <a-input
                v-decorator="['contractNo', { rules: [{ required: true, message: '请输入合同编号' }] }]"
                placeholder="请输入合同编号"
              />
            </a-form-item>
          </a-col>

          <a-col :sm="12" :xs="24">
            <a-form-item label="合同类型">
              <a-select
                v-decorator="['sellingType', { rules: [{ required: true, message: '请选择合同类型' }] }]"
                placeholder="请选择合同类型"
              >

                <a-select-option value="1">个人零售</a-select-option>
                <a-select-option value="2">批售</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <h2>销售方信息</h2>
        </a-row>

        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item label="企业名称">
              <a-input
                v-decorator="['enterpriseName', { rules: [{ required: false, message: '请输入企业名称' }] }]"
                placeholder="请输入企业名称"
                style="width: 100%"
                read-only
              />
            </a-form-item>
          </a-col>

          <a-col :sm="12" :xs="24">
            <a-form-item label="社会信用统一代码">
              <!--              <a-input-->
              <!--                v-decorator="['enterpriseUscc', { rules: [{ required: true, message: '请输入社会信用统一代码' }] }]"-->
              <!--                :disabled="showEnterpriseUscc"-->
              <!--                placeholder="请输入社会信用统一代码"-->
              <!--                style="width: 100%"-->
              <!--              />-->
              <a-input
                v-decorator="['enterpriseUscc', { rules: [{ required: true, message: '请输入社会信用统一代码' }] }]"
                placeholder="请输入社会信用统一代码"
                style="width: 100%"
                read-only
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item label="销售区域">
              <a-input
                v-decorator="['region', { rules: [{ required: true, message: '请选择销售区域' }] }]"
                placeholder="请选择销售区域"
                style="width: 100%"
                read-only
              />
              <!--              <a-select-->
              <!--                v-decorator="['region', { rules: [{ required: true, message: '请选择销售区域' }] }]"-->
              <!--                placeholder="请选择销售区域"-->
              <!--              >-->

              <!--                <a-select-option value="黄浦区">黄浦区</a-select-option>-->
              <!--                <a-select-option value="徐汇区">徐汇区</a-select-option>-->
              <!--                <a-select-option value="长宁区">长宁区</a-select-option>-->
              <!--                <a-select-option value="静安区">静安区</a-select-option>-->
              <!--                <a-select-option value="普陀区">普陀区</a-select-option>-->
              <!--                <a-select-option value="虹口区">虹口区</a-select-option>-->
              <!--                <a-select-option value="杨浦区">杨浦区</a-select-option>-->
              <!--                <a-select-option value="闵行区">闵行区</a-select-option>-->
              <!--                <a-select-option value="宝山区">宝山区</a-select-option>-->
              <!--                <a-select-option value="嘉定区">嘉定区</a-select-option>-->
              <!--                <a-select-option value="浦东新区">浦东新区</a-select-option>-->
              <!--                <a-select-option value="金山区">金山区</a-select-option>-->
              <!--                <a-select-option value="松江区">松江区</a-select-option>-->
              <!--                <a-select-option value="青浦区">青浦区</a-select-option>-->
              <!--                <a-select-option value="奉贤区">奉贤区</a-select-option>-->
              <!--                <a-select-option value="崇明区">崇明区</a-select-option>-->
              <!--                <a-select-option value="外省">外省</a-select-option>-->
              <!--                <a-select-option value="线上平台">线上平台</a-select-option>-->
              <!--                <a-select-option value="其他">其他</a-select-option>-->
              <!--              </a-select>-->
            </a-form-item>
          </a-col>
          <a-col :sm="12" :xs="24">
            <a-form-item label="销售地址">
              <a-input
                v-decorator="['businessAddress', { rules: [{ required: true, message: '请输销售地址' }] }]"
                placeholder="请输入销售地址"
                read-only
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item label="销售顾问姓名">
              <a-auto-complete
                v-decorator="['salesName', { rules: [{ required: true, message: '请输入销售顾问姓名' }] }]"
                :data-source="saleSource"
                placeholder="请输入销售顾问姓名"
                style="width: 100%"
                @change="saleChange"
                @select="saleSelect"
              />
            </a-form-item>
          </a-col>
          <a-col :sm="12" :xs="24">
            <a-form-item label="销售顾问手机号码">
              <a-input
                v-decorator="['salesPhone', { rules: [{ required: true, message: '请输入销售顾问手机号码',pattern: new RegExp(/(^1[3|4|5|8][0-9]\d{4,8}$)|(^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$)/),}] }]"
                placeholder="请输入销售顾问手机号码"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <h2>购买方信息(与"机动车销售统一发票"信息一致)</h2>
        </a-row>
        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item label="购买方姓名">
              <a-input
                v-decorator="['buyerName', { rules: [{ required: true, message: '请输入购买方姓名' }] }]"
                placeholder="请输入购买方姓名"
              />
            </a-form-item>
          </a-col>
          <a-col :sm="12" :xs="24">
            <a-form-item label="购买方手机号码">
              <a-input
                v-decorator="['buyerPhone', { rules: [{ required: true, message: '请输入购买方手机号码',pattern: new RegExp(/(^1[3|4|5|8][0-9]\d{4,8}$)|(^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$)/), }] }]"
                placeholder="请输入购买方手机号码"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item label="购买方性质">
              <a-select
                v-decorator="['buyerType', { rules: [{ required: false, message: '请选择购买方性质' }] }]"
                placeholder="请选择购买方性质"
              >

                <a-select-option value="1">个人</a-select-option>
                <a-select-option value="2">公司</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item label="证件类型">
              <a-select
                v-decorator="['pinType', { rules: [{ required: true, message: '请选择购买方证件类型' }] }]"
                placeholder="请选择购买方证件类型"
              >

                <a-select-option value="1">身份证</a-select-option>
                <a-select-option value="2">护照</a-select-option>
                <a-select-option value="3">士兵证军官证</a-select-option>
                <a-select-option value="4">港澳居民居住证</a-select-option>
                <a-select-option value="5">港澳居民来往内地通行证</a-select-option>
                <a-select-option value="6">台湾居民居住证</a-select-option>
                <a-select-option value="7">台湾居民来往大陆通行证</a-select-option>
                <a-select-option value="8">外国人永久居留身份证</a-select-option>
                <a-select-option value="9">其他有效身份证明</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :sm="12" :xs="24">
            <a-form-item label="证件号码">
              <a-input
                v-decorator="['pinNumber', { rules: [{ required: true, message: '请输入证件号码' }, {
            trigger: 'change',
            validator: this.IdentityVerify,
          }] }]"
                placeholder="请输入证件号码"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <h2>车辆信息</h2>
        </a-row>
        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item label="汽车品牌">
              <a-input
                v-decorator="['carBrand', { rules: [{ required: true, message: '请输入汽车品牌' }] }]"
                placeholder="请输入汽车品牌"
              />
            </a-form-item>
          </a-col>
          <a-col :sm="12" :xs="24">
            <a-form-item label="汽车型号">
              <a-input
                v-decorator="['carModel', { rules: [{ required: false, message: '请输入汽车型号' }] }]"
                placeholder="请输入汽车型号"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item label="车辆类型">
              <a-select
                v-decorator="['carType', { rules: [{ required: true, message: '请输入车辆类型' }] }]"
                placeholder="请选择车辆类型"
                @change="changeCarType"
              >

                <a-select-option value="1">燃油车</a-select-option>
                <a-select-option value="2">新能源汽车</a-select-option>
                <!-- <a-select-option value="3">油电</a-select-option> -->
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :sm="12" :xs="24">
            <a-form-item label="车架号">
              <a-input v-decorator="['carVin', {rules: [{ required: true, message: '请输入车架号' }] }]"
                       placeholder="请输入车架号"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item label="车型配置">
              <a-input
                v-decorator="['carTypeConfiguration', { rules: [{ required: true, message: '请输入车型配置' }] }]"
                placeholder="请输入车型配置"
              />
            </a-form-item>
          </a-col>

          <a-col :sm="12" :xs="24">
            <a-form-item label="汽车燃料类型">
              <a-select
                v-decorator="['fuelType', { rules: [{ required: true, message: '请输入汽车燃料类型' }] }]"
                placeholder="请选择汽车燃料类型"
              >

                <a-select-option value="1">油/电</a-select-option>
                <a-select-option value="2">电</a-select-option>
                <a-select-option value="3">油</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item label="外饰颜色">
              <a-input
                v-decorator="['carColor', { rules: [{ required: true, message: '请输入外饰颜色' }] }]"
                placeholder="请输入外饰颜色"
              />
            </a-form-item>
          </a-col>
          <a-col :sm="12" :xs="24">
            <a-form-item label="内饰颜色">
              <a-input
                v-decorator="['interiorColor', { rules: [{ required: true, message: '请输入内饰颜色' }] }]"
                placeholder="请输入内饰颜色"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item label="发动机号">
              <a-input
                v-decorator="['engineNumber', { rules: [{ required: false, message: '请输入发动机号' }] }]"
                placeholder="请输入发动机号"
              />
            </a-form-item>
          </a-col>
          <a-col :sm="12" :xs="24">
            <a-form-item label="动力蓄电池组编号">
              <a-input
                v-decorator="['batteryNumber', { rules: [{ required: carTypeFlag, message: '请输入动力蓄电池组编号' }] }]"
                placeholder="动力蓄电池组编号"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item label="电池发票号">
              <a-input
                v-decorator="['batteryInvoiceNumber', { rules: [{ required: false, message: '请输入电池发票号' }] }]"
                placeholder="请输入电池发票号"
              />
            </a-form-item>
          </a-col>
          <a-col :sm="12" :xs="24">
            <a-form-item label="电池发票时间">
              <!--              <a-input-->
              <!--                placeholder="请输入电池发票时间"-->
              <!--                v-decorator="['batteryInvoiceTime', { rules: [{ required: false, message: '请输入电池发票时间' }] }]"-->
              <!--              />-->
              <a-date-picker
                v-decorator="['batteryInvoiceTime', {initialValue: currentTime,  rules: [{ required: false, message: '请输入电池发票时间' }] }]"
                format="yyyy-MM-DD HH:mm:ss"
                placeholder="请输入电池发票时间"
                showTime
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item label="合格证号">
              <a-input v-decorator="['qualifiedNumber', {}]" placeholder="请输入合格证号"/>
            </a-form-item>
          </a-col>
          <a-col :sm="12" :xs="24">
            <a-form-item label="货物进口证明书编号">
              <a-input v-decorator="['importProveNumber', {}]" placeholder="请输入货物进口证明书编号"/>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item label="进口车辆随车检验单号">
              <a-input v-decorator="['importEngineNumber', {}]" placeholder="请输入进口机动车辆随车检验单号"/>
            </a-form-item>
          </a-col>

          <a-col :sm="12" :xs="24">
            <a-form-item label="充电条件落实方式">
              <a-select
                v-decorator="['chargeCondition', { rules: [{ required: false, message: '请选择充电条件落实方式' }] }]"
                placeholder="请选择充电条件落实方式"
              >

                <a-select-option value="1">自建</a-select-option>
                <a-select-option value="2">专用</a-select-option>
                <a-select-option value="3">公用</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <h2>支付信息</h2>
        </a-row>
        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item label="总价">
              <a-input-number
                v-decorator="['finalPrice', { rules: [{ required: true, message: '请输入总价' }] }]"
                placeholder="请输入总价"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
          <a-col :sm="12" :xs="24">
            <a-form-item label="付款类型">
              <a-select
                v-decorator="['paytype', { rules: [{ required: true, message: '请选择付款类型' }] }]"
                placeholder="请选择付款类型"
              >

                <a-select-option value="1">按揭</a-select-option>
                <a-select-option value="2">一次性付款</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-form-model
            ref="dynamicValidateForm"
            v-bind="formItemLayoutWithOutLabel"
            :model="dynamicValidateForm"
          >
            <a-form-model-item
              v-for="(paymentMethodJson, index) in dynamicValidateForm.paymentMethodJson"
              :key="paymentMethodJson.key"
            >
              <a-col :sm="7" :xs="24">
                <a-form-model-item
                  v-bind="
                    index === 0
                      ? formItemLayout
                      : {
                        wrapperCol: {
                          xs: { span: 24, offset: 0 },
                          sm: { span: 16, offset: 5 },
                        },
                      }
                  "
                  :label="index === 0 ? '支付方式' : ''"
                  :prop="'paymentMethodJson[' + index + '].paymentMethod'"
                  :rules="{
                    required: false,
                    message: '请选择支付方式',
                  }"
                  style="margin-bottom: 0px"
                >
                  <a-select v-model="paymentMethodJson.paymentMethod" placeholder="请选择支付方式">

                    <a-select-option value="1">刷卡</a-select-option>
                    <a-select-option value="2">转账</a-select-option>
                    <a-select-option value="3">支票</a-select-option>
                    <a-select-option value="4">现金</a-select-option>
                    <a-select-option value="5">微信</a-select-option>
                    <a-select-option value="6">支付宝</a-select-option>
                    <a-select-option value="7">银行承兑汇票</a-select-option>
                    <a-select-option value="8">预付</a-select-option>
                    <a-select-option value="9">本票</a-select-option>
                    <a-select-option value="10">会员电子账户</a-select-option>
                    <a-select-option value="11">门店储值卡</a-select-option>
                    <a-select-option value="13">券支付</a-select-option>
                    <a-select-option value="14">电汇</a-select-option>
                    <a-select-option value="15">挂账</a-select-option>
                    <a-select-option value="16">公户</a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :sm="7" :xs="24">
                <a-form-model-item
                  v-bind="
                    index === 0
                      ? formItemLayout
                      : {
                        wrapperCol: {
                          xs: { span: 24, offset: 0 },
                          sm: { span: 16, offset: 5 },
                        },
                      }
                  "
                  :label="index === 0 ? '金额' : ''"
                  :prop="'paymentMethodJson[' + index + '].paymentAmount'"
                  :rules="{
                    required: false,
                    message: '请输入金额',
                  }"
                  style="margin-bottom: 0px"
                >
                  <a-input-number
                    v-model="paymentMethodJson.paymentAmount"
                    placeholder="请输入金额"
                    style="width: 100%"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :sm="8" :xs="24">
                <a-form-model-item
                  v-bind="
                    index === 0
                      ? formItemLayout
                      : {
                        wrapperCol: {
                          xs: { span: 24, offset: 0 },
                          sm: { span: 16, offset: 5 },
                        },
                      }
                  "
                  :label="index === 0 ? '付款时间' : ''"
                  :prop="'paymentMethodJson[' + index + '].paymentDate'"
                  :rules="{
                    required: false,
                    message: '请选择付款时间',
                  }"
                  style="margin-bottom: 0px"
                >
                  <a-date-picker
                    v-model="paymentMethodJson.paymentDate"
                    :showTime="true"
                    format="yyyy-MM-DD HH:mm:ss"
                    placeholder="请选择付款时间"
                    style="width: 100%"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :sm="1" :xs="24">
                <a-icon
                  v-if="dynamicValidateForm.paymentMethodJson.length > 1"
                  :disabled="dynamicValidateForm.paymentMethodJson.length === 1"
                  class="dynamic-delete-button"
                  type="minus-circle-o"
                  @click="removeDomain(paymentMethodJson)"
                />
              </a-col>
            </a-form-model-item>
            <a-form-model-item
              :wrapperCol="{
                xs: { span: 24, offset: 0 },
                sm: { span: 20, offset: 4 },
              }"
            >
              <a-button style="width: 80%" type="dashed" @click="addDomain">
                <a-icon type="plus"/>
                添加表单
              </a-button>
            </a-form-model-item>
          </a-form-model>
        </a-row>
        <a-row>
          <h2>交易信息(与"机动车销售统一发票"信息一致)</h2>
        </a-row>

        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item label="开票日期">
              <a-date-picker
                v-decorator="['invoiceTime', { initialValue: currentTime, rules: [{ required: false, message: '请输入开票日期' }] }]"
                format="YYYY-MM-DD HH:mm:ss"
                placeholder="请输入开票日期"
                showTime
                style="width: 100%"
              />
            </a-form-item>
          </a-col>

          <a-col :sm="12" :xs="24">
            <a-form-item label="发票代码">
              <a-input
                v-decorator="['invoiceCode', { rules: [{ required: false, message: '请输入发票代码' }] }]"
                placeholder="请输入发票代码"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item label="发票号码">
              <a-input
                v-decorator="['invoiceNumber', { rules: [{ required: false, message: '请输入发票号码' }] }]"
                placeholder="请输入发票号码"
              />
            </a-form-item>
          </a-col>
          <a-col :sm="12" :xs="24">
            <a-form-item label="不含税价">
              <a-input-number
                v-decorator="['excludingTaxPrice', { rules: [{ required: false, message: '请输入不含税价的金额' }] }]"
                placeholder="请输入不含税价的金额"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item label="价税合计">
              <a-input-number
                v-decorator="['invoicePrice', { rules: [{ required: false, message: '请输入价税合计' }] }]"
                placeholder="请输入价税合计"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
          <a-col :sm="12" :xs="24">
            <a-form-item label="总实收">
              <a-input-number
                v-decorator="['receivedamount', { rules: [{ required: false, message: '请输入总实收' }] }]"
                placeholder="请输入总实收"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <h2>预交付信息</h2>
        </a-row>

        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item label="交付方式">
              <a-select
                v-decorator="['deliveryMethod', { rules: [{ required: true, message: '请选择交付方式' }] }]"
                placeholder="请选择交付方式"
              >

                <a-select-option value="1">自提</a-select-option>
                <a-select-option value="2">委托</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :sm="12" :xs="24">
            <a-form-item label="预定交车地点">
              <a-input
                v-decorator="['deliveryAddr', { rules: [{ required: true, message: '预定交车地点' }] }]"
                placeholder="预定交车地点"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item label="预定交车时间">
              <a-input
                v-decorator="['deliveryTime', { rules: [{ required: true, message: '请输入预定交车时间' }] }]"
                placeholder="请输入预定交车时间"
                style="width: 100%"
              />
              <!--              <a-date-picker-->
              <!--                v-decorator="['deliveryTime', { initialValue: currentTime,rules: [{ required: true, message: '请输入预定交车时间' }] }]"-->
              <!--                format="yyyy-MM-DD HH:mm:ss"-->
              <!--                placeholder="请输入预定交车时间"-->
              <!--                showTime-->
              <!--                style="width: 100%"-->
              <!--              />-->
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <h2>代办服务</h2>
        </a-row>
        <a-row>
          <a-col :sm="12" :xs="24">
            <a-form-item label="是否含代办服务">
              <a-select
                v-decorator="['agentOrNot', { rules: [{ required: true, message: '请选择含代办服务' }] }]"
                placeholder="请选择含代办服务"
                @change="changeIsagentOrNot"
              >
                <a-select-option value="1">是</a-select-option>
                <a-select-option value="2">否</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-if="showDing">
          <a-form-model
            ref="dynamicValidateForm2"
            v-bind="formItemLayoutWithOutLabel"
            :model="dynamicValidateForm2"
          >
            <a-form-model-item
              v-for="(agentContentsJson, index) in dynamicValidateForm2.agentContentsJson"
              :key="agentContentsJson.key"
            >
              <a-col :sm="11" :xs="24">
                <a-form-item
                  v-bind="
                    index === 0
                      ? formItemLayout2
                      : {
                        wrapperCol: {
                          xs: { span: 24, offset: 0 },
                          sm: { span: 18, offset: 5 },
                        },
                      }
                  "
                  :label="index === 0 ? '代办项目内容' : ''"
                  :prop="'agentContentsJson[' + index + '].agentContents'"
                  :rules="{
                    required: true,
                    message: '请输入代办项目内容',
                  }"
                  style="margin-bottom: 0px"
                >
                  <a-textarea
                    v-model="agentContentsJson.agentContents"
                    placeholder="请输入代办项目内容"
                    style="width: 200%"
                  />
                </a-form-item>
              </a-col>
              <a-col :sm="10" :xs="24">
                <a-form-item
                  v-bind="
                    index === 0
                      ? formItemLayout2
                      : {
                        wrapperCol: {
                          xs: { span: 24, offset: 0 },
                          sm: { span: 18, offset: 5 },
                        },
                      }
                  "
                  :label="index === 0 ? '备注情况' : ''"
                  :prop="'agentContentsJson[' + index + '].remarks'"
                  :rules="{
                    required: true,
                    message: '请输入备注情况',
                  }"
                  style="margin-bottom: 0px"
                >
                  <a-textarea
                    v-model="agentContentsJson.remarks"
                    placeholder="请输入备注情况"
                    style="width: 200%"
                  />
                </a-form-item>
              </a-col>
              <a-col :sm="1" :xs="24">
                <a-icon
                  v-if="dynamicValidateForm2.agentContentsJson.length > 1"
                  :disabled="dynamicValidateForm2.agentContentsJson.length === 1"
                  class="dynamic-delete-button"
                  type="minus-circle-o"
                  @click="removeDomain2(agentContentsJson)"
                />
              </a-col>
            </a-form-model-item>

            <a-form-model-item
              :wrapperCol="{
                xs: { span: 24, offset: 0 },
                sm: { span: 20, offset: 4 },
              }"
            >
              <a-button style="width: 80%" type="dashed" @click="addDomain2">
                <a-icon type="plus"/>
                添加表单
              </a-button>
            </a-form-model-item>
          </a-form-model>
        </a-row>
      </a-form>
    </a-spin>
<!--    <a-button type="primary" @click="saveDraft">暂存</a-button>-->
  </a-modal>
</template>

<script>

import { getAction, httpAction } from '@/api/manage'
import moment from 'moment'

export default {
  name: 'NewContractModal',
  data() {
    return {
      title: '新增合同信息',
      visible: false,
      model: {},
      saleSource: [],
      SaleInfosLike: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      orderNumber: '',
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {},
      url: {
        add: '/cxm/cxmContractManager/add',
        edit: '/cxm/cxmContractManager/add',
        saveDraft: 'cxm/cxmCommonBusiness/saveDraft',
        getDraft: 'cxm/cxmCommonBusiness/getDraft',
        getSaleInfosLike: 'cxm/cxmSalesInfo/getSaleInfosLike',
        // getSaleInfos: '/cxm/cxmContractManager/getSaleInfos'
        getSaleInfos: '/cxm/cxmOrderManager/getSaleInfos'
      },
      showDing: false,

      //动态表单
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        }
      },
      formItemLayout2: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18 }
        }
      },
      formItemLayoutWithOutLabel: {
        wrapperCol: {
          xs: { span: 24, offset: 0 },
          sm: { span: 24, offset: 0 }
        }
      },

      currentTime: '',
      dynamicValidateForm: {
        // paymentMethodJson: [{ key: Date.now(), paymentMethod: '', paymentAmount: '', paymentDate: '' }],
        paymentMethodJson: [{ key: Date.now(), paymentMethod: '', paymentAmount: '', paymentDate: '' }]
      },
      dynamicValidateForm2: {
        agentContentsJson: [{ key: Date.now(), agentContents: '', remarks: '' }]
      },
      showEnterpriseUscc: false,
      pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$)/,
      orderId: '',
      carTypeFlag: false,
    }
  },

  created() {
    this.getCurrentData()
  },

  methods: {

    getCurrentData() {
      if (this.currentTime === '') {
        this.currentTime = moment().format('YYYY-MM-DD HH:mm:ss')
      }
    },
    blurOrderNumber(e) {
      console.log(e.target.value)
      let orderNumber = e.target.value
      let httpurl = this.url.getSaleInfos
      let params = {
        orderNumber: orderNumber
      }
      getAction(httpurl, params).then((res) => {
        if (res.success) {
          console.log(res.result)
          this.model = res.result
          this.$nextTick(() => {
            this.form.setFieldsValue({
              // agentOrNot: this.model.agentOrNot,
              // batteryInvoiceNumber: this.model.batteryInvoiceNumber,
              // batteryInvoiceTime: this.model.batteryInvoiceTime,
              batteryNumber: this.model.batteryNumber,
              // businessAddress: this.model.businessAddress,
              buyerName: this.model.ownerName,
              buyerPhone: this.model.ownerPhone,
              // buyerType: this.model.buyerType,
              carBrand: this.model.carBrand,
              carColor: this.model.carColor,
              carModel: this.model.carModel,
              carType: this.model.carType,
              carTypeConfiguration: this.model.carTypeConfiguration,
              carVin: this.model.carVin,
              // chargeCondition: this.model.chargeCondition,
              // contractNo: this.model.contractNo,
              // contractSignTime: this.model.contractSignTime ? moment(this.model.contractSignTime) : null,
              // deliveryAddr: this.model.deliveryAddr,
              // deliveryMethod: this.model.deliveryMethod,
              // deliveryTime: this.model.deliveryTime ? moment(this.model.deliveryTime) : null,
              engineNumber: this.model.engineNumber,
              // enterpriseId: this.model.enterpriseId,
              enterpriseName: this.model.enterpriseName,
              enterpriseUscc: this.model.enterpriseUscc,
              // excludingTaxPrice: this.model.excludingTaxPrice,
              finalPrice: this.model.quoteAmount,
              fuelType: this.model.fuelType,
              importEngineNumber: this.model.importEngineNumber,
              importProveNumber: this.model.importProveNumber,
              interiorColor: this.model.interiorColor,
              // invoiceCode: this.model.invoiceCode,
              // invoiceNumber: this.model.invoiceNumber,
              // invoicePrice: this.model.invoicePrice,
              // invoiceTime: this.model.invoiceTime ? moment(this.model.invoiceTime) : null,
              // orderNumber: this.model.orderNumber,
              // businessAddress: this.model.operationAddr,
              businessAddress: this.model.businessAddress,
              // paytype: this.model.paytype,
              pinNumber: this.model.documentNumber,
              pinType: this.model.documentType,
              salesPhone: this.model.phone,
              qualifiedNumber: this.model.qualifiedNumber,
              // receivedamount: this.model.receivedamount,
              region: this.model.region,
              // region: this.model.registerDistinct,
              salesName: this.model.salename
              // salesPhone: this.model.phone,
              // sellingType: this.model.sellingType,
            })
          })
          if (this.model.enterpriseUscc) {
            this.showEnterpriseUscc = true
          } else {
            this.showEnterpriseUscc = false
          }
        }
      })

    },
    saleSelect(value) {
      console.log('saleSelect', value)
      for (let i = 0; i < this.SaleInfosLike.length; i++) {
        if (this.SaleInfosLike[i].salesName == value) {
          this.form.setFieldsValue({
            salesPhone: this.SaleInfosLike[i].salesPhone
          })
        }
      }
    },
    saleChange() {
      setTimeout(() => {
        console.log(this.form.getFieldValue('salesName'))
        let httpurl = this.url.getSaleInfosLike
        let params = {
          salesName: this.form.getFieldValue('salesName')
        }

        getAction(httpurl, params).then((res) => {
          /* res = {};
          res.success = true; */
          console.log(res)
          if (res.success) {
            /* res.result = [{
              "salesName": "刘里2",
              "salesPhone": "1321321321323"
            }, {
              "salesName": "刘醒2",
              "salesPhone": "1545454541212"
            }]; */
            this.SaleInfosLike = res.result
            this.saleSource = []
            for (let i = 0; i < res.result.length; i++) {
              this.saleSource.push(res.result[i].salesName)
              if (i > 8) {
                break
              }
            }
          }
        })
      }, 100)
    },
    changeIsagentOrNot(val) {
      if (val == '1') {
        this.showDing = true
      } else {
        this.showDing = false
      }
    },

    changeCarType(val) {
      if (val != '' && val == '2') {
        this.carTypeFlag = true
      } else {
        this.carTypeFlag = false
      }
      // console.log(this.carTypeFlag)
    },

    add(record) {
      let httpurl = this.url.getDraft
      let params = {
        bType: 'contract' + record.orderNumber
      }
      console.log(record)
      getAction(httpurl, params).then((res) => {
        console.log(res)
        if (res.success) {
          console.log('success')
          if (res.result) {
            //有暂存的情况
            this.edit(JSON.parse(res.result),1)
            // console.log("有暂存")
          } else {
            // this.edit(record)
            //无暂存的情况
            let that = this
            getAction(that.url.getSaleInfos, params).then((res) => {
              console.log(res)
              that.enterpriseList = res.result
              that.edit(record, 2)
              // console.log("无暂存")
              // console.log("结果")
            })
          }
        } else {
          this.edit(record)
        }
      })
    },
    edit(record,result) {
      console.log(record)
      this.visible = true
      if (record) {
        this.form.resetFields()
        this.model = Object.assign({}, record)
        console.log(this.model)
        this.orderId = this.model.orderNumber

        if (record.paymentMethodJson) {
          this.dynamicValidateForm.paymentMethodJson = JSON.parse(record.paymentMethodJson)
        }
        if (record.agentContentsJson) {
          this.dynamicValidateForm2.agentContentsJson = JSON.parse(record.agentContentsJson)
        }
        this.changeIsagentOrNot(this.model.agentOrNot)

        if (result == 1) {
          // console.log('有暂存')
          this.$nextTick(() => {
            this.form.setFieldsValue({
              agentOrNot: this.model.agentOrNot,
              batteryInvoiceNumber: this.model.batteryInvoiceNumber,
              // batteryInvoiceTime:  this.model.batteryInvoiceTime ? moment(this.model.batteryInvoiceTime) : null,
              batteryInvoiceTime: moment(this.model.batteryInvoiceTime),

              batteryNumber: this.model.batteryNumber,

              buyerName: this.model.buyerName,
              buyerPhone: this.model.buyerPhone,
              buyerType: this.model.buyerType,
              carBrand: this.model.carBrand,
              carColor: this.model.carColor,
              carModel: this.model.carModel,
              carType: this.model.carType,
              carTypeConfiguration: this.model.carTypeConfiguration,
              carVin: this.model.carVin,
              chargeCondition: this.model.chargeCondition,
              contractNo: this.model.contractNo,
              contractSignTime: moment(this.model.contractSignTime),
              deliveryAddr: this.model.deliveryAddr,
              deliveryMethod: this.model.deliveryMethod,
              deliveryTime: this.model.deliveryTime,
              engineNumber: this.model.engineNumber,

              //四个企业字段
              enterpriseUscc: this.model.enterpriseUscc,
              enterpriseName: this.model.enterpriseName,
              region: this.model.region,
              businessAddress: this.model.businessAddress,


              excludingTaxPrice: this.model.excludingTaxPrice,
              finalPrice: this.model.finalPrice,
              fuelType: this.model.fuelType,
              importEngineNumber: this.model.importEngineNumber,
              importProveNumber: this.model.importProveNumber,
              interiorColor: this.model.interiorColor,
              invoiceCode: this.model.invoiceCode,
              invoiceNumber: this.model.invoiceNumber,
              invoicePrice: this.model.invoicePrice,
              invoiceTime: moment(this.model.invoiceTime),
              orderNumber: this.model.orderNumber,
              paytype: this.model.paytype,
              pinNumber: this.model.pinNumber,
              pinType: this.model.documentType,
              qualifiedNumber: this.model.qualifiedNumber,
              receivedamount: this.model.receivedamount,

              salesName: this.model.salesName,
              salesPhone: this.model.salesPhone,
              sellingType: this.model.sellingType
            })
          })
        }


        if (result == 2) {
          // console.log('无暂存')
          this.$nextTick(() => {
            this.form.setFieldsValue({
              agentOrNot: this.model.agentOrNot,
              batteryInvoiceNumber: this.model.batteryInvoiceNumber,
              // batteryInvoiceTime:  this.model.batteryInvoiceTime ? moment(this.model.batteryInvoiceTime) : null,
              batteryInvoiceTime: moment(this.model.batteryInvoiceTime),

              batteryNumber: this.model.batteryNumber,

              buyerName: this.model.buyerName,
              buyerPhone: this.model.buyerPhone,
              buyerType: this.model.buyerType,
              carBrand: this.model.carBrand,
              carColor: this.model.carColor,
              carModel: this.model.carModel,
              carType: this.model.carType,
              carTypeConfiguration: this.model.carTypeConfiguration,
              carVin: this.model.carVin,
              chargeCondition: this.model.chargeCondition,
              contractNo: this.model.contractNo,
              contractSignTime: moment(this.model.contractSignTime),
              deliveryAddr: this.model.deliveryAddr,
              deliveryMethod: this.model.deliveryMethod,
              deliveryTime: this.model.deliveryTime,
              engineNumber: this.model.engineNumber,

              //四个企业字段
              enterpriseUscc: this.enterpriseList.enterpriseUscc,
              enterpriseName: this.enterpriseList.enterpriseName,
              region: this.enterpriseList.registerDistinct,
              businessAddress: this.enterpriseList.operationAddr,


              excludingTaxPrice: this.model.excludingTaxPrice,
              finalPrice: this.model.finalPrice,
              fuelType: this.model.fuelType,
              importEngineNumber: this.model.importEngineNumber,
              importProveNumber: this.model.importProveNumber,
              interiorColor: this.model.interiorColor,
              invoiceCode: this.model.invoiceCode,
              invoiceNumber: this.model.invoiceNumber,
              invoicePrice: this.model.invoicePrice,
              invoiceTime: moment(this.model.invoiceTime),
              orderNumber: this.model.orderNumber,
              paytype: this.model.paytype,
              pinNumber: this.model.pinNumber,
              pinType: '1',
              qualifiedNumber: this.model.qualifiedNumber,
              receivedamount: this.model.receivedamount,

              salesName: this.model.salesName,
              salesPhone: this.model.salesPhone,
              sellingType: this.model.sellingType
            })
          })

          this.model.pinType = '1'

        }

        if (this.model.enterpriseUscc || this.enterpriseList.enterpriseUscc) {
          this.showEnterpriseUscc = true
        } else {
          this.showEnterpriseUscc = false
        }

        if(this.model.carType == '2'){
          this.carTypeFlag = true
        }

      }

    },
    close() {
      this.$emit('close')
      this.visible = false
      this.confirmLoading = false
      this.form.resetFields()
      this.model = {}
      this.dynamicValidateForm = {
        paymentMethodJson: [{ key: Date.now(), paymentMethod: '', paymentAmount: '', paymentDate: '' }]
      }
      this.dynamicValidateForm2 = {
        agentContentsJson: [{ key: Date.now(), agentContents: '', remarks: '' }]
      }

    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let httpurl = '/cxm/cxmContractManager/add'
          let method = 'post'
          // this.model.id = null
          // if (!this.model.id) {
          //   httpurl += this.url.add
          //   method = 'post'
          // } else {
          //   httpurl += this.url.edit
          //   method = 'put'
          // }
          let formData = Object.assign(
            this.model,
            values,
            this.dynamicValidateForm.paymentMethodJson.paymentDate = this.dynamicValidateForm.paymentMethodJson.paymentDate ? this.dynamicValidateForm.paymentMethodJson.paymentDate.format('YYYY-MM-DD HH:mm:ss') : null,
            {
              paymentMethodJson: JSON.stringify(this.dynamicValidateForm.paymentMethodJson)
              // paymentMethodJson: this.dynamicValidateForm.paymentMethodJson,

            },
            {
              agentContentsJson: JSON.stringify(this.dynamicValidateForm2.agentContentsJson)
              // agentContentsJson: this.dynamicValidateForm2.agentContentsJson,
            }
          )
          formData.paymentMethodJson = JSON.parse(formData.paymentMethodJson)
          formData.paymentMethodJson[0].paymentDate = moment(formData.paymentMethodJson[0].paymentDate).format('YYYY-MM-DD HH:mm:ss')
          formData.paymentMethodJson = JSON.stringify(formData.paymentMethodJson)
          console.log(formData.paymentMethodJson)
          //时间格式化 contractSignTime
          //formData.deliveryTime = formData.deliveryTime ? formData.deliveryTime.format('YYYY-MM-DD HH:mm:ss') : null
          formData.contractSignTime = formData.contractSignTime
            ? formData.contractSignTime.format('YYYY-MM-DD HH:mm:ss')
            : null

          //开票日期
          formData.invoiceTime = formData.invoiceTime ? formData.invoiceTime.format('YYYY-MM-DD HH:mm:ss') : null

          // //发票时间
          formData.batteryInvoiceTime = formData.batteryInvoiceTime ? formData.batteryInvoiceTime.format('YYYY-MM-DD HH:mm:ss') : null
          //付款时间
          formData.id = null

          console.log('通过')

          httpAction(httpurl, formData, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
                that.close()
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              // that.$parent.$parent.close()
            })
        }
      })
    },
    handleCancel() {
      this.close()
    },

    // IdentityVerify(rule, value, callback) {
    //   clearTimeout(checkPending)
    //   // new RegExp(this.pattern).test(value) ? callback() : callback(new Error('请输入正确的身份证号码'))
    //   let checkPending
    //   checkPending = setTimeout(() => {
    //     if (this.model.pinType !== '1') {
    //       callback()
    //     } else if (this.model.pinType === '1' && value !== '') {
    //       if (new RegExp(this.pattern).test(value)) {
    //         callback()
    //       } else {
    //         callback(new Error('身份证格式不正确'))
    //       }
    //     }
    //   }, 10)
    // },
    IdentityVerify(rule, value, callback) {
      console.log(value)
      clearTimeout(checkPending)
      // new RegExp(this.pattern).test(value) ? callback() : callback(new Error('请输入正确的身份证号码'))
      let checkPending
      checkPending = setTimeout(() => {
        if (this.model.pinType !== '1') {
          callback()
        } else if (this.model.pinType === '1' && value !== '' && value !== undefined) {
          if (new RegExp(this.pattern).test(value)) {
            callback()
          } else {
            callback(new Error('身份证格式不正确'))
          }
        } else if (this.model.pinType === '1' && value == undefined) {
          callback(new Error(' '))
        } else if (this.model.pinType === '1' && value == '') {
          callback(new Error(' '))
        }
      }, 10)
    },

    saveDraft() {
      const that = this
      this.form.validateFields((err, values) => {
        let formData = Object.assign(
          this.model,
          values, {
            paymentMethodJson: JSON.stringify(this.dynamicValidateForm.paymentMethodJson)
          },
          {
            agentContentsJson: JSON.stringify(this.dynamicValidateForm2.agentContentsJson)
          })
        //时间格式化 contractSignTime
        //formData.deliveryTime = formData.deliveryTime ? formData.deliveryTime.format('YYYY-MM-DD HH:mm:ss') : null

        formData.paymentMethodJson = JSON.parse(formData.paymentMethodJson)
        formData.paymentMethodJson[0].paymentDate = moment(formData.paymentMethodJson[0].paymentDate).format('YYYY-MM-DD HH:mm:ss')
        formData.paymentMethodJson = JSON.stringify(formData.paymentMethodJson)

        formData.contractSignTime = formData.contractSignTime
          ? formData.contractSignTime.format('YYYY-MM-DD HH:mm:ss')
          : null
        formData.invoiceTime = formData.invoiceTime ? formData.invoiceTime.format('YYYY-MM-DD HH:mm:ss') : null

        // //发票时间
        formData.batteryInvoiceTime = formData.batteryInvoiceTime ? formData.batteryInvoiceTime.format('YYYY-MM-DD HH:mm:ss') : null
        //付款时间
        formData.id = null

        let httpurl = this.url.saveDraft

        console.log(JSON.stringify(formData))
        let Data = {}
        Data.btype = 'contract' + this.orderId
        Data.content = JSON.stringify(formData)
        console.log(Data)
        httpAction(httpurl, Data, 'post')
          .then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          })
          .finally(() => {
            that.confirmLoading = false
            that.close()
          })
      })

    },

    //移除表单
    removeDomain(item) {
      let index = this.dynamicValidateForm.paymentMethodJson.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.paymentMethodJson.splice(index, 1)
      }
    },
    removeDomain2(item) {
      let index = this.dynamicValidateForm2.agentContentsJson.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm2.agentContentsJson.splice(index, 1)
      }
    },
    //添加表单
    addDomain() {
      this.dynamicValidateForm.paymentMethodJson.push({
        key: Date.now()
      })
    },
    addDomain2() {
      this.dynamicValidateForm2.agentContentsJson.push({
        key: Date.now()
      })
    }
  }

}
</script>

<style lang="less" scoped>
.dynamic-delete-button {
  cursor: pointer;
  position: relative;
  top: 4px;
  font-size: 24px;
  color: #999;
  transition: all 0.3s;
}

.dynamic-delete-button:hover {
  color: #777;
}

.dynamic-delete-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
</style>